<template>
  <div>
    <!-- 轮播图 -->
    <XmlySwipeItem />

    <!-- 排行榜 分类 听单 -->
    <div class="center-nav">
      <div class="rank" @click="toRank">
        <img
          class="rankimg"
          src="https://fdfs.xmcdn.com/group56/M09/3B/BD/wKgLgFyQujLCAVYRAAAuwA7DZMg198.png"
          alt=""
        />
        <p>排行榜</p>
      </div>
      <div class="classfication" @click="tochannel">
        <img
          class="classficationimg"
          src="https://fdfs.xmcdn.com/group60/M02/18/F4/wKgLeVziZxHRlc-lAAAO9ZkPU-I489.png"
          alt=""
        />
        <p>分类</p>
      </div>
      <div class="list">
        <img
          class="listimg"
          src="https://fdfs.xmcdn.com/group57/M0A/3B/D0/wKgLgVyQuqWRZsJtAAAnr8tg4rs307.png"
          alt=""
        />
        <p>听单</p>
      </div>
    </div>

    <!-- 内容横幅：喜马拉雅APP 立即下载 -->
    <XmlyBanner />

    <!-- 内容：热门推荐 -->
    <div class="recommend">
      <h3 class="recommend-title">热门推荐</h3>
      <div class="recommend-content">
        <div v-for="(item, id) in recommendList" :key="id">
          <img :src="'https://imagev2.xmcdn.com/' + item.albumCoverPath" />
          <p>{{ item.albumTitle }}</p>
        </div>
      </div>
    </div>

    <!-- 内容：猜你喜欢 -->
    <div class="fond">
      <h3 class="fond-title">猜你喜欢</h3>
      <div class="fond-content">
        <div class="fond-content-box">
          <div
            class="fond-content-imgbox"
            v-for="(item, id) in fondList"
            :key="id"
          >
            <div>
              <img
                :src="'https://imagev2.xmcdn.com/' + item.albumCoverPath"
                class="fond-list-img"
              />
            </div>
            <div>
              <h3>{{ item.albumTitle }}</h3>
              <p>{{ item.intro }}</p>
              <div class="fond-vociedata">
                <img src="@/assets/images/voice.png" alt="" />
                <span>{{ item.albumTrackCount }}</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="@/assets/images/Headset.png" alt="" />
                <span>{{ item.albumPlayCount }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import XmlySwipeItem from "@/components/XmlySwipeItem";
  // import XmlyBanner from "@/components/XmlyBanner";
  import { getRecommendApi, getFondApi } from "@/api/home";

  export default {
    name: "XmlyRecommend",
    // components: { XmlySwipeItem, XmlyBanner },
    data() {
      return {
        // 热门推荐数据
        recommendList: [],
        fondList: [],
      };
    },

    mounted() {
      // 请求热门推荐数据
      this.getRecommendList();

      // 请求猜你喜欢数据
      this.getFondList();
    },

    methods: {
      // 请求热门推荐数据
      async getRecommendList() {
        const result = await getRecommendApi();
        this.recommendList = result.data.albums;
      },

      // 请求猜你喜欢数据
      async getFondList() {
        const result = await getFondApi();
        this.fondList = result.data.albums;
      },

      // 跳转到排行榜页面
      toRank() {
        this.$router.push({
          name: "rank",
        });
      },

      // 跳转到分类页面
      tochannel() {
        this.$router.push({
          name: "channel",
        });
      },
    },
  };
</script>

<style>
  /* 排行榜 分类 听单 */
  .center-nav {
    width: 100%;
    margin: 20px 0px 10px 0px;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
  }
  .center-nav div img {
    width: 34px;
  }
  .center-nav div p {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    color: #666666;
    text-align: center;
  }

  /* 内容：热门推荐 */
  .recommend {
    width: 100%;
  }
  .recommend-title {
    margin: 19px;
    font-size: 18px;
    color: #40404c;
  }
  .recommend-content {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .recommend-content div {
    width: 33%;
    text-align: center;
  }
  .recommend-content img {
    width: 105px;
    border-radius: 10px;
  }
  .recommend-content p {
    margin: 0px 0px 5px 0px;
    font-size: 13px;
    color: #333333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* 内容：猜你喜欢 */
  .fond {
    width: 100%;
  }
  .fond-title {
    margin: 19px;
    font-size: 18px;
    color: #40404c;
  }
  .fond-content-box {
    margin: 15px;
  }
  .fond-content-imgbox {
    display: flex;
    margin: 0px 0px 10px 0px;
  }
  .fond-list-img {
    width: 93px;
    border-radius: 10px;
  }
  .fond-content-box h3 {
    font-size: 16px;
    font-weight: normal;
    color: #000000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: 0px 15px 0px 15px;
  }
  .fond-content-box p {
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #999999;
    margin: 10px 15px 0px 15px;
    height: 34px;
  }
  .fond-content-box span {
    font-size: 12px;
    color: #999999;
    line-height: 26px;
  }
  .fond-vociedata {
    display: flex;
    margin: 0px 0px 0px 15px;
  }
  .fond-vociedata img {
    margin: 5px;
    text-align: center;
  }
</style>
